import React, { useState } from 'react';
import DescriptionsCondition from '@/components/DescriptionsCondition';
import DrawerCondition from '@/components/DrawerCondition';
import { ShowTime } from '@/common/contact';
import ImagePreviewGroup from '@/components/DescriptionsCondition/ImagePreviewGroup';
import VideoPreview from '@/components/DescriptionsCondition//VideoPreview';
const PointDetail = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading, renderContent } = props;
  const { detail = {}, show } = visible;
  const { contentType } = detail;

  const formItems = [
    {
      label: '素材名称',
      name: 'materialName',
    },
    {
      label: '分类名称',
      name: 'categoryName',
    },

    {
      label: '创建者名称',
      name: 'createAdminName',
    },
    {
      label: '使用次数',
      name: 'useAmount',
    },

    {
      label: '状态',
      name: 'status',
      render: (e) => {
        return {
          0: '下架',
          1: '上架',
        }[e];
      },
    },
    {
      label: '上传类型',
      name: 'contentType',
      render: (e) => {
        return {
          image: '图片',
          video: '视频 ',
        }[e];
      },
    },
    {
      label: '上传媒体',
      name: 'content',
      render: (e = '{}', record) => {
        const list = JSON.parse(e).url;
        return contentType === 'video' ? (
          <VideoPreview url={list}></VideoPreview>
        ) : renderContent(list, contentType, false);
      },
    },
    {
      label: '封面',
      show: contentType === 'image' || contentType === 'video',
      name: 'cover',
      render: (e) => {
        if (!e) {
          return null;
        }
        const list = JSON.parse(e).url;
        return <ImagePreviewGroup url={list}></ImagePreviewGroup>;
      },

    },
    {
      label: '分类是否允许下载',
      name: 'categoryDownloadFlag',
      render: (e) => {
        return {
          0: '否',
          1: '是 ',
        }[e];
      },
    },
    {
      label: '分类是否允许分享',
      name: 'categoryShareFlag',
      render: (e) => {
        return {
          0: '否',
          1: '是 ',
        }[e];
      },
    },
    {
      label: '是否允许下载',
      name: 'downloadFlag',
      render: (e) => {
        return {
          0: '否',
          1: '是 ',
        }[e];
      },
    },
    {
      label: '是否允许分享',
      name: 'categoryDownloadFlag',
      render: (e) => {
        return {
          0: '否',
          1: '是 ',
        }[e];
      },
    },
  ];
  const modalProps = {
    label: `素材详情`,
    visible: show,
    onClose,
  };
  return (
    <DrawerCondition {...modalProps}>
      <DescriptionsCondition formItems={formItems} initialValues={detail}></DescriptionsCondition>
    </DrawerCondition>
  );
};
export default PointDetail;
